body {
  background-color: #fff;
}

.container {
  font-size: 8px;
  position: relative;
  margin: 0 auto;
  width: 38.5em;
  height: 38.5em;
}
.container .shadow {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0.125em;
  height: 0.125em;
  border-radius: 50%;
  background: #999;
  transform: rotateX(83deg);
  box-shadow: 0 2em 20em 13em #8f8f8f;
  z-index: -1;
}
.container .ring {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #c7c7c7;
  border: 0.125em solid #e1e1e1;
  background-image: linear-gradient(-45deg, #eaeaea 20%, #d4d4d4, #c7c7c7);
}
.container .ring::before, .container .ring::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  display: block;
}
.container .ring::before {
  top: 1em;
  left: 1em;
  width: 36em;
  height: 36em;
  border-radius: 50%;
  background: #d1d1d1;
  border: 0.25em solid #b2b2b2;
  border-bottom: 0.125em solid #959595;
  border-right: 0.125em solid #959595;
  background-image: linear-gradient(-45deg, #f2f2f2 15%, #d1d1d1);
  box-shadow: inset 0.125em 0.125em 0.5em 0.125em #818181;
}
.container .ring::after {
  top: 6em;
  left: 6em;
  width: 26.5em;
  height: 26.5em;
  border-radius: 50%;
  background: #545454;
  background-image: linear-gradient(-45deg, #7f7f7f 30%, #545454);
}
.container .shutter {
  position: absolute;
  top: 8.625em;
  left: 8.625em;
  width: 21.5em;
  height: 21.5em;
  border-radius: 50%;
  background: #181816;
  overflow: hidden;
  box-shadow: 0 0 0 0.75em #181816, 0 0 0 1.5em #373737;
}
.container .shutter .leaf {
  position: absolute;
  width: 22em;
  height: 22em;
  border-radius: 0 0 9em 13em/0 0 3em 5em;
}
.container .shutter .leaf.a {
  bottom: 4.375em;
  right: 1em;
  box-shadow: 0 0.25em 0 #4c2f4d, -8em 3em 4em #442149, 0 10em 0 #7a21a3, inset 0 -0.25em 0.25em #200526;
}
.container .shutter .leaf.a::before, .container .shutter .leaf.a::after {
  content: "";
  position: absolute;
  display: block;
  width: inherit;
  height: inherit;
  border-radius: inherit;
}
.container .shutter .leaf.a::before {
  bottom: -4em;
  right: 4em;
  transform: rotate(300deg);
  box-shadow: 3em 2em 3em #5d206e, 0 10em 0 #9731c5, inset 0 -0.25em 0.25em #200526;
}
.container .shutter .leaf.a::after {
  bottom: -9.5em;
  right: 2.5em;
  transform: rotate(240deg);
  box-shadow: 8em 5em 8em #361d3b, 0 10em 0 #8829b7, inset 0 -0.25em 0.25em #200526;
}
.container .shutter .leaf.b {
  bottom: -5.5em;
  right: -2em;
  transform: rotate(180deg);
  box-shadow: 10em 7em 6em #1e618b, 0 10em 0 #522162, inset 0 -0.25em 0.25em #200526;
}
.container .shutter .leaf.b::before, .container .shutter .leaf.b::after {
  content: "";
  position: absolute;
  display: block;
  width: inherit;
  height: inherit;
  border-radius: inherit;
}
.container .shutter .leaf.b::before {
  bottom: -5.37em;
  right: 4.5em;
  clip: rect(0, 18em, 43.11em, 0);
  transform: rotate(-60deg);
  box-shadow: 5.5em 10em 4em #256186, 0 10em 0 #2f3241, inset 0 -0.25em 0.25em #200526;
}
.container .shutter .leaf.b::after {
  bottom: -8.5em;
  right: 2.3em;
  transform: rotate(-120deg);
  clip: rect(0, 16em, 43.11em, 0);
  box-shadow: -0.625em 0em 0.725em #4a7693, -11em 2em 5em #1e618b, 0 10em 0 #411e46, inset 0 -0.25em 0.25em #200526;
}
.container .shutter .leaf.c {
  bottom: 4.375em;
  right: 1em;
  clip: rect(0, 10em, 43.11em, 0);
  box-shadow: 0 0.25em 0 #4c2f4d, -3em 2.5em 4em #442149, 0 10em 0 #7a21a3, inset 0 -0.25em 0.25em #200526;
}
.container .shutter .lens-outer {
  position: relative;
  width: 10em;
  height: 10em;
  border-radius: 50%;
  margin: 6em 0 0 5.6em;
  background-image: radial-gradient(circle closest-side at 83% 83%, #c0b9c0, #968d9a 35%, #495057);
}
.container .shutter .lens-outer::before, .container .shutter .lens-outer::after {
  content: "";
  position: absolute;
  display: block;
}
.container .shutter .lens-outer::before {
  top: 0.625em;
  left: 0.625em;
  width: 8.75em;
  height: 8.75em;
  border-radius: 50%;
  background: #351c3c;
  box-shadow: 0 0 0 0.125em #111d29;
  background-image: linear-gradient(-45deg, #112b3c, #351c3c 70%);
}
.container .shutter .lens-outer::after {
  top: 2.375em;
  left: 2.375em;
  width: 5.25em;
  height: 5.25em;
  border-radius: 50%;
  background: #150619;
  background-image: linear-gradient(-45deg, #0a2035, #17081b 70%);
}
.container .shutter .lens {
  position: absolute;
  top: 9.5em;
  left: 9.125em;
  width: 2.75em;
  height: 2.75em;
  border-radius: 50%;
  background: #000;
  border: 0.125em solid #221f27;
}
.container .shutter .lens::after {
  content: "";
  position: absolute;
  top: -2.875em;
  left: -2.875em;
  width: 8.25em;
  height: 8.25em;
  border-radius: 50%;
  transform: rotate(45deg);
  box-shadow: inset -0.375em 0 0.375em -0.25em #7c4c88;
}
.container .flare {
  position: absolute;
  top: 8.625em;
  left: 8.625em;
  width: 21.5em;
  height: 21.5em;
  border-radius: 50%;
  background-image: radial-gradient(ellipse at 27% 17%, rgba(63, 162, 233, 0.3) 4%, rgba(0, 0, 0, 0) 49%);
}
.container .flare::after {
  content: "";
  position: absolute;
  top: 0.375em;
  left: 0.375em;
  width: 20.75em;
  height: 20.75em;
  border-radius: 50%;
  box-shadow: inset -1.125em -2em 2em -1.5em rgba(140, 88, 152, 0.6);
}
.container .flare2 {
  position: absolute;
  top: 9.125em;
  left: 9.125em;
  width: 20.5em;
  height: 20.5em;
  border-radius: 50%;
  overflow: hidden;
  transform: rotate(-20deg);
}
.container .flare2::before, .container .flare2::after {
  content: "";
  position: absolute;
  display: block;
  border-radius: 10.75em/5em;
  width: 18.75em;
  height: 9em;
}
.container .flare2::before {
  top: -1em;
  left: -5em;
  background-color: rgba(168, 212, 255, 0.1);
  clip: rect(7.45em, 14.8em, 9.5em, 0em);
}
.container .flare2::after {
  top: 6.45em;
  left: 5.9em;
  box-shadow: 0 -5em 0 rgba(168, 212, 255, 0.1);
  clip: rect(0em, 19.5em, 0.85em, 3.9em);
}
.container .flare3 {
  position: absolute;
  top: 9.125em;
  left: 9.125em;
  width: 20.5em;
  height: 20.5em;
  border-radius: 50%;
  background: rgba(168, 212, 255, 0.1);
  clip: rect(0, 20.5em, 6.458em, 0);
  transform: rotate(-20deg);
}
.container .flare3::before {
  content: "";
  position: absolute;
  display: block;
  width: 6.25em;
  height: 5.5em;
  transform: rotateX(30deg);
  top: 1.25em;
  left: 5.5em;
  border-radius: 6.25em/5.5em;
  box-shadow: inset 0 -3em 5em 0em rgba(255, 255, 255, 0.2);
}